<template>
  <div>
    <div class="courseEdit">
      <el-form ref="form"
               label-width="80px"
               :model="editQuery">
        <el-form-item label="课程名称"
                      prop="name">
          <el-input v-model="editQuery.course_name">
          </el-input>
        </el-form-item>
        <el-form-item label="课程分类">
          <el-select placeholder="请选择"
                     v-model="editQuery.category_id">
            <el-option v-for="item in categoryNameOptions"
                       :key="item.category_id"
                       :label="item.category_name"
                       :value="item.category_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序"
                      prop="sort">
          <el-input v-model="editQuery.sort">
          </el-input>
        </el-form-item>
        <el-form-item label="课程介绍"
                      prop="sort">
          <el-input type="textarea"
                    :rows="2"
                    v-model="editQuery.desc"
                    placeholder="请输入内容">
          </el-input>
        </el-form-item>
        <el-form-item label="课程来源:"
                      prop="resource">
          <el-radio-group v-model="editQuery.type">
            <el-radio :label="0">图片二维码</el-radio>
            <el-radio :label="1">视频源文件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程二维码">
          <el-upload :class="{hide:hideUpload}"
                     v-model="editQuery.file_id"
                     ref="upload"
                     :on-change="handleAvatarChange"
                     :on-remove="fileOnRemove"
                     :limit="1"
                     action="#"
                     name="files"
                     :file-list="fileArr"
                     :auto-upload="false"
                     :on-preview="handlePreview"
                     :on-success="handleAvatarSuccess"
                     list-type="picture-card">

            <i slot="default"
               class="el-icon-plus"></i>

            <div slot="tip"
                 class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="解锁要求">
          <el-input type="text"
                    v-model="editQuery.remark"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch style="display: block"
                     v-model="editQuery.status"
                     active-color="#13ce66"
                     inactive-color="#ff4949"
                     active-text="上架"
                     inactive-text="下架">
          </el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="buttonGroup">
      <el-button size="mini">取消</el-button>
      <el-button type="primary"
                 size="mini"
                 @click="save">保存</el-button>
    </div>
  </div>

</template>

<script>
import { editCourse, categoryList } from '@/api/system/training'
export default {
  props: ['course_id', "row"],

  watch: {
    course_id (oldValue, newValue) {
      // oldValue旧数据newValue新数据
      //监听值 如果不一样就触发事件
      if (oldValue != newValue) {
        this.editQuery.course_id = oldValue
        // this.getList(); // 你的查询方法
      }
    },
    //   row (oldValue, newValue) {

    //     if (oldValue != newValue) {
    //       document.getElementsByClassName('el-upload--picture-card')[0].style.display = 'none'
    //       this.editQuery.course_name = this.row.course_name
    //       this.editQuery.category_id = this.row.category_info.category_id
    //       this.editQuery.type = this.row.type
    //       if (this.row.status == 0) {
    //         this.editQuery.status = false
    //       } else if (this.row.status == 1) {
    //         this.editQuery.status = true
    //       }
    //       this.editQuery.sort = this.row.sort
    //       this.editQuery.desc = this.row.desc
    //       this.editQuery.url = oldValue.file_info.url
    //       this.editQuery.file_id = oldValue.file_info.file_id
    //       this.editQuery.remark = this.row.remark
    //       // this.getList(); // 你的查询方法
    //     }
    //   },
  },

  created () {
    this.getEditList()
    this.getcategoryList()
    console.log("子组件row", this.row);
  },
  data () {
    return {
      hideUpload: false,
      dialogImageUrl: '',
      dialogVisible: false,
      categoryNameOptions: [],
      editQuery: {
        course_name: "",
        category_id: "",
        type: "",
        status: "",
        sort: "",
        desc: "",
        file_id: "",
        remark: "",
        course_id: this.course_id
      },

    }

  },
  computed: {
    fileArr () {
      // 上传图片 显示默认图片
      return this.editQuery.url ? [{ url: this.editQuery.url }] : []
    }
  },
  methods: {
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleAvatarSuccess (res, file) {
      this.hideUpload = true
    },
    fileOnRemove (file, fileList) {
      document.getElementsByClassName('el-upload--picture-card')[0].style.display = 'block'
      this.hideUpload = false
    },
    fileOnChange (file, fileList) {
      document.getElementsByClassName('el-upload--picture-card')[0].style.display = 'none'
      console.log(fileList)
      this.fileList = fileList;
    },
    handlePreview (file) {
      // console.log(file, "点击放大");
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //锁定当前行的信息
    getEditList () {
      this.editQuery.course_name = this.row.course_name
      this.editQuery.category_id = this.row.category_info.category_id
      this.editQuery.type = this.row.type
      if (this.row.status == 0) {
        this.editQuery.status = false
      } else if (this.row.status == 1) {
        this.editQuery.status = true
      }

      this.editQuery.sort = this.row.sort
      this.editQuery.desc = this.row.desc
      this.editQuery.url = this.row.file_info.url
      this.editQuery.file_id = oldValue.file_info.file_id
      this.editQuery.remark = this.row.remark
    },
    save () {
      editCourse(this.editQuery).then((res) => {
        if (res.data.code == "200") {
          this.$message.success(res.data.msg)
          this.$emit("closeAddDialog")
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },


    //取消编辑按钮

    //获取分类名称内容
    getcategoryList () {
      categoryList().then((res) => {
        this.categoryNameOptions = res.data.data.list
        console.log(this.categoryNameOptions);
      })
    }
  }
}
</script>

<style>
.hide .el-upload--picture-card {
  display: none;
}
.courseEdit {
  height: calc(100vh - 50px);
  overflow: auto;
  box-shadow: 0px 10px 10px #f2f6fc;
}
.buttonGroup {
  margin-top: 10px;
}
</style>